<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath%>">
    <style type="text/css">
        #div1 {
            margin-left: 36px;
            margin-top: 20px;
        }

        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 92%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
        }

        th {
            text-align: center;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ddd
        }
        td {
            text-align: center;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ddd
        }
        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
            border-top-color: inherit;
            border-right-color: inherit;
            border-bottom-color: inherit;
            border-left-color: inherit;
        }

        #table1 {
            border-spacing: 0;
            border-collapse: collapse;
            width: 1400px;
        }
    </style>
    <script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function loadData() {
            $.ajax({
                url: "order/queryOrders",
                dataType: "json",
                success: function (data) {
                    $("#content").empty()
                    $.each(data, function (i, n) {
                        $("#content").append("<tr>")
                            .append("<td>" + n.orderId + "</td>")
                            .append("<td>" + n.state + "</td>")
                            .append("<td>￥" + n.price + "</td>")
                            .append("<td>" + n.nums + "</td>")
                            .append("<td>" + n.productId + "</td>")
                            .append("<td>" + n.insertDate + "</td>")
                            .append("<td>" + n.payDate + "</td>")
                            .append("<td>" + n.sendDate + "</td>")
                            .append("<td>" + n.successDate + "</td>")
                            .append("<td><a href='order/buy?id=" + n.productId + "&userName="+n.userName+"' style='text-decoration: none; color: #FF5555'>" +
                                "<button style='padding: 3px 6px; background-color: lightsteelblue; color: black; " +
                                "cursor: pointer; font-weight: bold; font-size: 14px; border: 1px solid skyblue'>查看详情</button>" +
                                "</a></td>");
                        if (n.state == "待收货") {
                            $("#content").append("<td><a href='order/updateSuccessDate?id=" + n.id + "' style='text-decoration: none; color: #FF5555'>" +
                                "<button style='padding: 3px 6px; background-color: skyblue; color: black; " +
                                "cursor: pointer; font-weight: bold; font-size: 14px; border: 1px solid skyblue'>确定收货</button>" +
                                "</a></td>")
                        } else if (n.state == "待付款") {
                            $("#content").append("<td><a href='order/pay2?id=" + n.id + "&nums="+n.nums+"&productId="+n.productId+"' style='text-decoration: none; color: #FF5555'>" +
                                "<button style='padding: 3px 6px; background-color: crimson; color: ghostwhite; " +
                                "cursor: pointer; font-weight: bold; font-size: 14px; border: 1px solid skyblue'>立即付款</button>" +
                                "</a></td>")
                        } else {
                            $("#content").append("<td></td>")
                        }

                        $("#content").append("</tr>")
                    })
                }
            })
        }
        $(function () {
            loadData()
        })
    </script>
</head>
<body>
<div id="div1">
    <h1 style="background-color: #5bc0de;" class="label">购物车</h1>
    <br><br>
    <div>
        <table style="border: 1px solid #ddd;" id="table1">
            <thead style="background-color: #DFF0D8">
            <tr style="height: 30px">
                <th>订单编号</th>
                <th>状态</th>
                <th>金额</th>
                <th>物品数量</th>
                <th>物品编号</th>
                <th>创建时间</th>
                <th>支付时间</th>
                <th>发货时间</th>
                <th>确定收货时间</th>
                <th colspan="2" align="center">操作</th>
            </tr>
            </thead>
            <tbody id="content">

            </tbody>
        </table>
    </div>
</div>
</body>
</html>
